<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事项预约</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css" />
		<style>
			.work_name{width:100%;padding:.25rem .2rem;box-sizing:border-box;background:#fff;float:left;/*margin-top:45px*/}
			.work_name>img{width:.82rem;height:.86rem;float:left;margin-right:.25rem;}
			.work_name>h5{width:6rem;float:left;line-height:.35rem;font-size:.32rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#333;margin:.05rem 0 0 0;}
		    .work_name>.file_num{width:5rem;float:left;line-height:.3rem;font-size:.28rem;color:#666;margin-top:.12rem;}
		    .mui-bar-nav~.mui-content{padding:0;position:absolute;top:0;left:0;height:100%;overflow:auto;}
		    .blue{color:#104ffc;}
		     /*办理过程*/
			.control_cont h6{width:100%;float:left;height:.7rem;line-height:.7rem;font-size:.3rem;color:#333;margin:0;}
			.control_cont h6>img{width:.23rem;float:left;margin:.178rem .13rem 0 .3rem;}
			 /*基本信息*/
	        .control_cont{width:100%;float:left;}
	        .basic_info{width:100%;float:left;padding:0;margin:0;}
		    .basic_info>li{width:100%;height:.85rem;line-height:.85rem;border-bottom:1px solid #e5e5e5;background:#fff;float:left;position:relative;}
		    .basic_info>li>label,.basic_info>li>a>label{width:1.6rem;float:left;text-align:left;font-size:.28rem;color:#999;box-sizing:border-box;padding-left:.25rem;}
		    .basic_info>li>span,.basic_info>li>a>span{font-size:.28rem;color:#333;width:4.1rem;float:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:1rem;min-height:1px;}
			.work_name{width:100%;padding:.25rem .2rem;box-sizing:border-box;background:#fff;margin-bottom:.1rem;float:left;}
			.work_name>img{width:.82rem;height:.86rem;float:left;margin-right:.25rem;}
			.work_name>h5{width:5.5rem;float:left;line-height:.35rem;font-size:.32rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#333;margin:.05rem 0 0 0;}
			.work_name>.file_num{width:5.5rem;float:left;line-height:.3rem;font-size:.28rem;color:#666;margin-top:.12rem;}
			.mui-icon-arrowright{float:right;color:#adadad;font-size:.5rem;margin-top:-.2rem;font-weight:bold;}
			.blue{color:#104ffc;}
			.basic_info>li>a{display:block;width:100%;float;left;}
			.basic_info>li .mui-icon-arrowright{margin:.17rem 0 0 .05rem;float:left;}
			.basic_info>li .tel{width:.3rem;height:.33rem;float:right;background:url(../../images/jindu/tel.png) no-repeat;background-size:100% auto;margin-top:.27rem;margin-right:.44rem;}
			.basic_info>li .form_control{width:5.05rem;float:left;padding-left:0;box-sizing:border-box;line-height:.85rem;color:#666;font-size:.3rem;border:none;height:.85rem;background:transparent;}
			.basic_info>li input[placeholder], [placeholder], *[placeholder] {color:#c7c7cd !important;}
			.code{color:#1653fc;font-size:.3rem;position:absolute;top:0;right:.4rem;width:1.6rem !important;text-align:right;}
			.basic_info .mui-btn-primary{width:6.8rem;height:.85rem;background:#1653fc;color:#fff;border-radius:.1rem;overflow:hidden;margin:.5rem 0 0 .35rem;float:left;font-size:.32rem;}
			/*弹出层样式*/
			.mui-picker{background-color:#fff;}
			.mui-poppicker-body{height:2.5rem;border-top:none;}
			.mui-poppicker-body .mui-picker:last-child{position:absolute;width:2.4rem !important;left:2.6rem;top:-1.7rem;background:url(../../images/jindu/tuoy.png) no-repeat;background-size:100% auto;}
			.mui-poppicker-body .mui-picker{width:50% !important;}
			.sy_num{height:1.75rem;background:#fff;}
			.mui-poppicker-body .mui-picker:last-child .mui-pciker-rule-ft,.mui-poppicker-body .mui-picker:last-child .mui-pciker-list{border:none;top:36%;}
			.mui-poppicker-body .mui-picker:last-child .mui-pciker-list li.highlight{color:#265fff;font-size:.32rem;margin-top:-.05rem;}
			.mui-poppicker-header{position:relative;}
			.sy_text{font-size:.24rem;color:#999;position:absolute;top:2.03rem;left:3.4rem;z-index:100;}
			.mui-pciker-list li{font-size:.32rem;}
			.mui-pciker-list, .mui-pciker-rule,.mui-pciker-rule-ft{top:40%;}
			.mui-pciker-list, .mui-pciker-rule{height:40px;}
		</style>
	</head>
	<body>
			<div class="mui-content">
				<div class="work_name">
					<img src="../../images/jindu/already_file.png">
					<h5 id="sxmc"></h5>
					<div class="file_num" id="ssjg"></div>
				</div>
				<div class="control_cont">
					<h6><img src="../../images/jindu/address.png">选择办理地点</h6>
					<ul class="basic_info">
					 	<li id="bldd_arrowright">
					 		<a> <input id="handleLocationOid" type="hidden">
						 		<label>办理地点</label>
						 		<span id="bldd"></span>
						 		<i class="mui-icon mui-icon-arrowright"></i>
					 		</a>
					 	</li>
					 	<li>
					 		<label>地址</label>
					 		<span id="bldz"></span>
					 	</li>
					 	<li>
					 		<label>电话</label>
					 		<span id="bldh"></span>
					 		<i class="tel hide" id="tel_show"></i>
					 	</li>
					 	<h6><img src="../../images/jindu/writer.png" style="margin-top:.24rem">填写相关信息</h6>
					 	<li>
					 		<label>姓名</label>
					 		<span><input id="userName" type="text" class="form_control" value=""></span>
					 	</li>
					 	<li>
					 		<label>身份证号码</label>
					 		<span><input id="userID" type="text" class="form_control" value=""></span>
					 	</li>
					 	<li id='showCityPicker'>
					 		<a>
						 		<label>选择时间</label>
						 		<input id="time" type="hidden">
						 		<input id="day" type="hidden">
						 		<span><span  class="" type='button' id='showTimeVal'></span></span>
						 		<i class="mui-icon mui-icon-arrowright"></i>
					 		</a>
					 	</li>
					 	<li>
					 		<label>手机号码</label>
					 		<span><input type="text" id="phoneNum" class="form_control" value=""></span>
					 		<a class="code code01">获取验证码</a>
							<a class="code code02" style="display:none;">60s</a>
					 	</li>
					 	<li>
					 		<label>验证码</label>
					 		<span><input type="text" id="code" class="form_control" placeholder="请输入验证码"></span>
					 	</li>
					 	<li>
					 		<label>联系地址</label>
					 		<span><input id="address" type="text" class="form_control" value=""></span>
					 	</li>
					 	<input type="button" class="mui-btn mui-btn-primary ripple" id="submit"  value="提交">
				    </ul>
				</div>
			</div>
		<script>
			function my_immersed(immersed){
			}
		</script>
		<script src="../../js/immersed.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/jquery2.2.4.min.js"></script>
		<script src="../../js/mui.picker.min.js"></script>
		<script src="../../js/app.js"></script>

	<script>
		var serviceId = "";
		var userPicker = null;
		var handleLocations = "";
		var timeConfig = "";
		mui.plusReady(function() {
			document.getElementById('handleLocationOid').value='';
			document.getElementById('time').value='';
			document.getElementById('day').value='';
			localStorage.removeItem("$smsYyInfo");
			//获取上一个页面传过来的参数开始
			serviceId = utils.getUrlParam('serviceId');
			loadInfo(serviceId);
			loadUserInfo();
		});
		
		//倒计时
		$('.code01').click(function(){
		   var j = $(this);
		   var flag = document.getElementById('phoneNum').value.trim();
		   if(flag == '' || flag == undefined){
		    	mui.toast("请输入手机号码!");
		    	return ;
		    	
		   }else{
		    	if(!isMoible(flag)){
		    		mui.toast("请输入正确的手机号码!");
		    		return ;
		    	}
		   }
		   
		   sendSMS(SYS_PARAM.SEND_ID_CODE_SMS,flag,function(code){
				if(code){
					$("#code").val(code);
					var myDate = new Date();
					var smsYyInfo = {};
					smsYyInfo.phone = flag;
					smsYyInfo.code = code;
					smsYyInfo.codeTime = myDate.getTime();
					localStorage.setItem("$smsYyInfo",JSON.stringify(smsYyInfo));
					j.hide();
					$('.code02').show();
					setTimeout(countDown, 1000);
				}
			});
			
			var t = 60;
			function countDown() {//倒计时
				t--;
				if(t > 0) {
					$('.code02').text(t + 's');
					setTimeout(countDown, 1000);
				} else {
					$('.code02').hide();
					$('.code02').text('60s');
					j.show();
				}
			}
		    
		});
		
		
	 	(function($, doc) {
				$.init();
				$.ready(function() {
					loadTime();
					
					setTimeout(function(){
						//普通示例
						userPicker = new $.PopPicker({
							layer: 3
						});
						userPicker.setData(timeConfig);
						var showUserPickerButton = document.getElementById('showCityPicker');
						var showTimeVal = document.getElementById('showTimeVal');
						showUserPickerButton.addEventListener('tap', function(event) {
							userPicker.show(function(items) {
								if(items[2].text != 0){
									showTimeVal.innerText = items[1].value + " " + items[0].text;
									document.getElementById('time').value=items[0].text;
									document.getElementById('day').value=items[1].value;
								}else{
									mui.toast("该时段已约满，请选择其他时段");
								}
							});
						}, false);
					},3000)
					
				});
		})(mui, document);

		/**
		 * 加载事项相关信息
		 * @param {Object} serviceId 事项主键
		 */
		function loadInfo(serviceId) {
			var param = 'serviceId=' + serviceId;
			var url = 'appHttpService/appInitOnlineBooking.do';
			utils.ajax(url, function(data) {
				data = JSON.parse(data);
				if(data.code == 0) {
					var onlineBookInf = JSON.parse(data.onlineBookInf);
					var tempBldd = JSON.parse(data.handleLocations);
					
					document.getElementById("sxmc").innerHTML = data.appServiceName;
					document.getElementById("ssjg").innerHTML = "所属机构："+getHandleAttribute(data.appServiceOrg);
					document.getElementById("bldd").innerHTML = getHandleAttribute(onlineBookInf[0].sxHandleLocation.locationName);
					document.getElementById("bldz").innerHTML = getHandleAttribute(onlineBookInf[0].sxHandleLocation.locationAddr);
					document.getElementById('handleLocationOid').value=onlineBookInf[0].sxHandleLocation.handleLocationOid;
					
					var tel_value = getHandleAttribute(onlineBookInf[0].sxHandleLocation.consultTel);
					document.getElementById("bldh").innerHTML = tel_value;
					if(tempBldd.length>0){
						handleLocations = convert(JSON.parse(data.handleLocations));
						localStorage.setItem("$handleLocationsList",JSON.stringify(handleLocations));
					}
					
					if(tel_value == ''){
						if(!$("#tel_show").hasClass('hide')){
			         		$("#tel_show").addClass('hide');
			         	}
					}else{
						if($("#tel_show").hasClass('hide')){
			         		$("#tel_show").removeClass('hide');
			         	}
					}
				}
				//关闭进度条
				closeWaitingAndShowView();
			}, param);
		};
		
		/**
		 * 加载人员相关信息   add by ouyangl 2017-09-29
		 */
		function loadUserInfo(){
			var user = getUser();
			if(user != null && user != undefined && user != ''){
				document.getElementById('userName').value = user.userName;
				document.getElementById('userID').value = user.idCard;
				document.getElementById('phoneNum').value = user.phone;
				document.getElementById('address').value = getHandleAttribute(user.userAddress);
			}
		}
		
		/**
		 * 办理地点选择
		 */
		document.getElementById("bldd_arrowright").addEventListener('tap',function(event){
			showTemplates('onlineBooking_bldd.html','办理地点选择','_www/src/work/onlineBooking_bldd.html');
		});
		
		//选择办理地点设置办理地点
		window.addEventListener('updateBldd',function(event){
			document.getElementById("bldd").innerHTML = getHandleAttribute(event.detail.locationName);
			document.getElementById("bldz").innerHTML = getHandleAttribute(event.detail.locationAddr);
			document.getElementById('handleLocationOid').value=event.detail.handleLocationOid;
			var tel_value = getHandleAttribute(event.detail.consultTel);
			document.getElementById("bldh").innerHTML = tel_value;
			if(tel_value == ''){
				if(!$("#tel_show").hasClass('hide')){
	         		$("#tel_show").addClass('hide');
	         	}
			}else{
				if($("#tel_show").hasClass('hide')){
	         		$("#tel_show").removeClass('hide');
	         	}
			}
		});
		
		/**
		 * 组装办理地点
		 * @param {Object} items
		 */
		function convert(items) {
			var newItems = [];
			for(var i in items ){
				newItems.push({
					handleLocationOid:items[i].handleLocationOid,
					consultTel:getHandleAttribute(items[i].consultTel),
					locationAddr: getHandleAttribute(items[i].locationAddr),
					locationName: getHandleAttribute(items[i].locationName)
				});
			}
			return newItems;
		}
		
		/**
		 * 加载预约时间
		 * @param {Object} serviceId 事项主键
		 */
		function loadTime() {
			var param = 'serviceId=' + serviceId;
			var url = 'appHttpService/getAppOnlineBookingDayJson.do';
			utils.ajax(url, function(data) {
				data = JSON.parse(data);
				if(data.code == 0) {
					timeConfig = JSON.parse(data.time);
				}
			}, param);
		};
		
		
		/**
		 * 处理字段
		 * @param {Object} attribute 字段属性
		 */
		function getHandleAttribute(attribute){
			var newAttribute = attribute;
			if(newAttribute == '' || newAttribute == undefined || newAttribute == null){
				newAttribute = '';
			}
			return newAttribute;
		}
		
		
		/**
		 * 表单验证
		 */
		function check(){
			var realName = document.getElementById("userName").value;
			if(realName==null || realName.trim()==""){
				mui.toast("请输入姓名");
				return false;
			}else if(realName.trim().length > 50){
				mui.toast("姓名最大长度不能超过50位！");
				return false;
			}
			
			var  cardId = document.getElementById("userID").value;
			if(cardId==null || cardId.trim() == ""){
				mui.toast("请输入身份证号");
				return false;
			}
			
			if(!isIDCard(cardId)){
				mui.toast("请输入正确的身份证号");
				return false;
			}
			
			var showTimeVal = document.getElementById('showTimeVal').innerText;
			if(showTimeVal == null || showTimeVal.trim() == ""){
				mui.toast("请选择时间");
				return false;
			}
			
		   var phoneNum = document.getElementById('phoneNum').value.trim();
		   if(phoneNum == '' || phoneNum == undefined){
		    	mui.toast("请输入手机号码!");
		    	return false;
		    	
		   }else{
		    	if(!isMoible(phoneNum)){
		    		mui.toast("请输入正确的手机号码!");
		    		return false;
		    	}
		   }
			
			var code = document.getElementById("code").value;
			if(code == null || code.trim() == ''){
				mui.toast("请输入验证码");
				return false;
			}
			
			var address = document.getElementById("address").value;
			if(address !=null && address != 'undefined' && address.trim().length > 250){
				mui.toast("联系地址最大长度不能超过250位！");
				return false;
			}
			
			return true;
		}
		
		/**
		 * 验证验证码是否正确
		 */
		function checkSmsCode(){
			var phone = document.getElementById("phoneNum").value.trim();
			var code = document.getElementById("code").value;
			var smsInfo = JSON.parse(localStorage.getItem("$smsYyInfo"));
			var thisdate = new Date();
			//大于5分钟
			if (thisdate.getTime() - smsInfo.codeTime  > 300000){
				mui.toast('您的验证码已过期!');
				return false;
			}else{
				if(smsInfo.code == code && smsInfo.phone == phone ){
					return true;
				}else{
					mui.toast('您输入的验证码不正确!');
					return false;
				}
			}
		}
		
		/**
		 * 保存预约信息
		 */
		document.getElementById('submit').addEventListener('tap', function() {
			if(check() && checkSmsCode()){
				utils.showWaiting();
				var url = "appHttpService/getAppValiOnlineBookingCount.do";
				var cardId = document.getElementById("userID").value.trim();
				var userId = getUserId();
				var param = 'serviceOid='+serviceId + '&cardId='+cardId + '&userId='+userId;
				utils.ajax(url,function(data){
					data = JSON.parse(data);
					if (data.code == 0 || data.code == '0' ) {
						var url = "appHttpService/checkOnlineBookingBeyondMaxCount.do";
						var time = document.getElementById('time').value;
						var day = document.getElementById('day').value;
						var param = 'time='+time + '&day='+day;
						utils.ajax(url,function(data){
							data = JSON.parse(data);
							if (data.code == 0 || data.code == '0' ){
								saveYY(function(){
									mui.back();
								});
							}else if (data.code == 2 || data.code == '2' ){
								mui.toast(data.result);
								utils.closeWaiting();
							}else if (data.code == 1 || data.code == '1' ){
								mui.toast(data.result);
								utils.closeWaiting();
							}else{
								mui.toast('验证超出最大预约数异常');
								utils.closeWaiting();
							}
						},param,null,function(){
							mui.toast('验证超出最大预约数异常');
							utils.closeWaiting();
						})
					}else{
						mui.alert(data.result);
						utils.closeWaiting();
					}
				},param,null);
			}
		});
		
		function saveYY(callback){
				var url = "appHttpService/saveAppOnlineBooking.do";
				var userName = document.getElementById("userName").value.trim();
				var cardId = document.getElementById("userID").value.trim();
				var phoneNum = document.getElementById("phoneNum").value.trim();
				var time = document.getElementById('time').value;
				var day = document.getElementById('day').value;
				var address = document.getElementById("address").value.trim();
				var userId = getUserId();
				var handleLocationOid = document.getElementById("handleLocationOid").value.trim();
				var param = 'userId='+userId + '&serviceOid='+serviceId + '&userName='+userName+ '&cardId='+cardId + '&phoneNum='+phoneNum+ '&time='+time+ '&day='+day+'&handleLocationOid='+handleLocationOid+ '&address='+address;
				utils.ajax(url,function(data){
					data = eval("(" + data + ")");
					utils.closeWaiting();
					if (data.code == 0 || data.code == '0' ) {
						showTemplates('onlineBooking_success','预约成功','_www/src/work/onlineBooking_success.html?recId='+data.onlineBookingRecId);
						plus.webview.currentWebview().hide();
						plus.webview.currentWebview().close();
					}else{
						mui.alert(data.msg);
					}
				},param,null,function(){
					mui.toast('预约出现异常');
					utils.closeWaiting();
				})
		}
		
		
		//电话按钮监听
		document.getElementById("tel_show").addEventListener('tap',function(event){
			var telVal = document.getElementById("bldh").innerHTML;
			if(telVal != ''){
				telTo(telVal);
			}
		});
		//拨打电话
		function telTo (mobile) {
			var btnArray = ['拨打', '取消']; 
            mui.confirm('是否拨打 ' + mobile + ' ？', '提示', btnArray, function(e) { 
                if (e.index == 0) { 
                    plus.device.dial(mobile, false);
                }
            });
		}
	</script>
	</body>
</html>

